<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            height: 1000px;
        }
    </style>
</head>
<body>
    <button id="btn">点我</button>
    <script>
        /*
            btn.onclick = function(event){}//这里的event就是当前事件的对象，简称事件对象
            注意：只要触发DOM上的某个事件时，就i会产生一个事件对象event，这个对象中包含所有与事件相关的信息

            event常见的属性：
            clientX:光标相对于网页的水平位置(相对于可视区域)
            clientY:光标相对于网页的垂直位置
            type:事件的类型
            target:该事件被传送到的对象
            screenX:光标相对于屏幕的水平位置
            screenY:光标相对于屏幕的垂直位置
            pageX:光标相对于网页的水平位置(不适用于IE)
            pageY:光标相对于网页的垂直位置(不适用于IE)
            (与clientY区别，当网页滚动时，算的是之前顶部的距离)
            width:该窗口或者框架的宽度
            height:该窗口或者框架的高度
            data:返回拖拽对象的URL字符串
        */
        window.addEventListener('load',function(){
            let btn = document.getElementById('btn');
            // btn.addEventListener('click',function(event){
            //     console.log(event);
            // })
            // btn.addEventListener('mouseenter',function(event){
            //     console.log(event);
            // })
            btn.addEventListener('click',function(event){
                console.log(event.clientX,event.clientY);//光标在不同位置点击返回相对网页的水平与垂直位置的值也不同
                console.log(event.type);//事件的类型(这里是click)
                console.log(event.target)
                console.log(event.screenX,event.screenY)
                console.log(event.pageX,event.pageY)
            })
        })
    </script>
</body>
</html>